<template>
  <div class="commentList" :class="isShow ? 'empty' : ''">
    <md-scroll-view
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @endReached="onEndReached"
      @refreshing="onRefresh"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <md-result-page
        v-show="isShow"
        style="margin-top: 30px"
        text="该商品暂无评价"
      ></md-result-page>
      <hry-card
        v-for="(item, index) in data"
        :info="item"
        :key="index"
      ></hry-card>
      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
        finished-text="已经到底啦~"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script>
import {
  ResultPage,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "index",
  components: {
    [ResultPage.name]: ResultPage,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    hryCard: () => import("@/components/goods/comment")
  },
  data() {
    return {
      isShow: false,
      data: [],
      isFinished: false,
      curpage: 1
    };
  },
  methods: {
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(
          this.$api.goodsComment,
          {
            curpage: this.curpage,
            goods_id: this.$route.params.id
          },
          false
        )
        .then(res => {
          if (refresh) {
            this.data = res.data.list;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.list);
          }
          if (this.curpage === res.data.total_page) {
            this.isFinished = true;
          }
          if (this.data.length === 0) {
            this.isShow = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  }
};
</script>

<style scoped lang="stylus">
.commentList{
  height 100%;
  overflow: hidden;
}
</style>
